<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <!-- viewport meta to reset iPhone inital scale -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Trabalho DW1</title>
		<!-- INCLUDES CSS -->
		<link rel="stylesheet" href="public/css/style.css"/>
		<link rel="stylesheet" href="public/css/layout-mediaqueries.css"/>
		<!-- INCLUDES JS -->
		<script src="public/js/jquery-1.7.1.js"></script>
		<script src="public/js/default.js"></script>
        <!-- css3-mediaqueries.js for IE8 or older -->
        <!--[if lt IE 9]>
            <link rel="stylesheet" href="public/css/css3-mediaqueries.css"/>
        <![endif]-->
    </head>
    <body cz-shortcut-listen="true">
    	<div id="mask" style="display: none;">
    		<div id="popup-product" style="display: none;">
    			<div class="popup-product-title layout-css-gradient">
    				<h3><center>Informações</center></h3>
    				<a href="javascript:closePopup();" style="float:right; margin-right: 17px; cursor: auto; font-size: 12px; ">Fechar <strong>X</strong></a>
    			</div>
    			<div class="popup-product-content">
    				<div class="popup-product-image">
    					<img src="public/images/produto-pc.jpeg"/>
    				</div>
    				<div class="popup-product-info">
    					<h4>Computador 100Pro</h4>
    					<p>Um computador positivo core i7, placa de video radeon hd 8980, full hd, resolução 2750x1980, 3d, positivo.</p>
    					<br/>
    					<h4>Dados técnicos:</h4>
    					<table>
    						<tr>
    						<td>Peso</td>
    						<td>5.3kg</td>
    						</tr>
    						<tr>
    						<td>Cor</td>
    						<td>Preto/Branco</td>
    						</tr>
    						<tr>
    						<td>Garantia</td>
    						<td>3 meses</td>
    						</tr>
    					</table>
    				</div>
    				<div class="popup-product-actions layout-css-gradient">
    					<a href="#">Adicionar ao Carrinho</a>
    				</div>
    			</div>
    		</div>
    	</div>
        <div id="pagewrap">
            <div id="header" class="layout-css-gradient">
            		<h3>Header</h3>
        			<ul>
						<li>
			            	<!-- LINK LOGIN MOBILE -->
							<div class="header-mobile-link-login">
        						<a href="#" id="sidebar-mobile-link-login">Login</a>
							</div>
						</li>
					</ul>
					<ul>
					<li>
						<!-- FORM LOGIN -->
						<div class="header-form-login">
			        		<form action="#" method="post">
			        			<input type="text" name="username" placeholder="Type your username.">
								<input type="text" name="password" placeholder="Type your password.">
								<input type="submit" name="login" value="login">
			        		</form>
		        		</div>
					</li>
					<li>
						<!-- FORM LOGIN MOBILE-->
						<div class="header-mobile-form-login">
			        		<form action="#" method="post">
			        			<input type="text" name="username" placeholder="Digite seu username.">
								<input type="text" name="password" placeholder="Digite seu password.">
								<input type="submit" name="login" value="login">
			        		</form>
		        		</div>
					</li>
				</ul>
            </div>
			
            <div id="sidebar">
            	<h3 class="layout-css-gradient">Sidebar</h3>
            	<!-- SIDEBAR DESKTOP -->
                <ul class="sidebar-desktop-list">
					<li><a href="#">Home</a></li>
					<li><a href="#">Contato</a></li>
					<li><a href="#">Loja</a></li>
                	<li><a class="has-sublist" href="#">Produtos</a></li>
					<div class="sublist">
						<a href="#">Computadores</a><br/>
						<a href="#">Mouses</a><br/>
						<a href="#">Teclados</a><br/>
						<a href="#">Monitores</a><br/>
						<a href="#">Notebooks</a><br/>
					</div>
                </ul>
            </div>
			
            <div id="content">
                <h3 class="layout-css-gradient">Destaques</h3>
				<table class="products-content"><tbody><tr><td class="layout-css-gradient"><a href="javascript:openPopup(this);">Computador 100Pro</a></td></tr><tr><td><img src="public/images/produto-pc.jpeg" width="150px" height="120px"></td></tr><tr><td class="descricao"><p>Um computador positivo core i7, placa de video radeon hd 8980, full hd...</p></td></tr></tbody></table>
				<table class="products-content"><tbody><tr><td class="layout-css-gradient"><a href="javascript:openPopup(this);">Computador 100Pro</a></td></tr><tr><td><img src="public/images/produto-pc.jpeg" width="150px" height="120px"></td></tr><tr><td class="descricao"><p>Um computador positivo core i7, placa de video radeon hd 8980, full hd...</p></td></tr></tbody></table>
				<table class="products-content"><tbody><tr><td class="layout-css-gradient"><a href="javascript:openPopup(this);">Computador 100Pro</a></td></tr><tr><td><img src="public/images/produto-pc.jpeg" width="150px" height="120px"></td></tr><tr><td class="descricao"><p>Um computador positivo core i7, placa de video radeon hd 8980, full hd...</p></td></tr></tbody></table>
				<table class="products-content"><tbody><tr><td class="layout-css-gradient"><a href="javascript:openPopup(this);">Computador 100Pro</a></td></tr><tr><td><img src="public/images/produto-pc.jpeg" width="150px" height="120px"></td></tr><tr><td class="descricao"><p>Um computador positivo core i7, placa de video radeon hd 8980, full hd...</p></td></tr></tbody></table>
				<table class="products-content"><tbody><tr><td class="layout-css-gradient"><a href="javascript:openPopup(this);">Computador 100Pro</a></td></tr><tr><td><img src="public/images/produto-pc.jpeg" width="150px" height="120px"></td></tr><tr><td class="descricao"><p>Um computador positivo core i7, placa de video radeon hd 8980, full hd...</p></td></tr></tbody></table>
				<table class="products-content"><tbody><tr><td class="layout-css-gradient"><a href="javascript:openPopup(this);">Computador 100Pro</a></td></tr><tr><td><img src="public/images/produto-pc.jpeg" width="150px" height="120px"></td></tr><tr><td class="descricao"><p>Um computador positivo core i7, placa de video radeon hd 8980, full hd...</p></td></tr></tbody></table>
				<table class="products-content"><tbody><tr><td class="layout-css-gradient"><a href="javascript:openPopup(this);">Computador 100Pro</a></td></tr><tr><td><img src="public/images/produto-pc.jpeg" width="150px" height="120px"></td></tr><tr><td class="descricao"><p>Um computador positivo core i7, placa de video radeon hd 8980, full hd...</p></td></tr></tbody></table>
				<table class="products-content"><tbody><tr><td class="layout-css-gradient"><a href="javascript:openPopup(this);">Computador 100Pro</a></td></tr><tr><td><img src="public/images/produto-pc.jpeg" width="150px" height="120px"></td></tr><tr><td class="descricao"><p>Um computador positivo core i7, placa de video radeon hd 8980, full hd...</p></td></tr></tbody></table>
				<table class="products-content"><tbody><tr><td class="layout-css-gradient"><a href="javascript:openPopup(this);">Computador 100Pro</a></td></tr><tr><td><img src="public/images/produto-pc.jpeg" width="150px" height="120px"></td></tr><tr><td class="descricao"><p>Um computador positivo core i7, placa de video radeon hd 8980, full hd...</p></td></tr></tbody></table>
            </div>
			
            <div id="footer" class="layout-css-gradient">
                <h3>Rodapé</h3>
            </div>
			
        </div>
    </body>
</html>